<template>
  <div ref="wrap" id="wrap">
    <div ref="content" class="content">
      <template v-for="item in 200">
        <div :key="item">{{item}}</div>
      </template>
    </div>
    <div ref="scrollBar" class="scrollBar">

    </div>
  </div>
</template>

<script>
import damu from '@/utils/damu.js'

export default {
  components: {},
  data () {
    return {

    }
  },
  methods: {
    verticalMove () {
      let wrap = this.$refs.wrap
      let bar = this.$refs.scrollBar
      let content = this.$refs.content
      // 滚动条高度/视口 = 视口/内容
      bar.style.height = document.documentElement.clientHeight * (document.documentElement.clientHeight / content.offsetHeight) + 'px'
      let callBack = {
        start: function () {
          bar.style.opacity = 1
        },
        move: function () {
          /* 滚动条滚动的实时距离/滚动条能滚动的最远距离 = 内容滚动的实时距离/内容能滚动的最远距离 */
          let scale = document.documentElement.clientHeight / content.offsetHeight
          damu.css(bar, 'translateY', -scale * damu.css(this, 'translateY'))
        },
        end: function () {
          bar.style.opacity = 0
        }
      }

      damu.vMove(wrap, callBack)
    }
  },
  mounted () {
    this.verticalMove()
  }
}
</script>
<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: pink;
  .scrollBar {
    position: absolute;
    right: 0;
    top: 0;
    background: deeppink;
    width: 4px;
    height: 100%;
    opacity: 0;
    transition: 1s opacity;
  }
}
</style>
